@page "/Sparkline"
<Table DataSource="datas">
    <AntDesign.Column @bind-Field="@context.id"></AntDesign.Column>
    <AntDesign.Column TData="string">
        <TinyColumn Data="@context.trend" Config="trendConfig"></TinyColumn>
    </AntDesign.Column>
    <AntDesign.Column TData="string">
        <TinyLine Data="@context.times" Config="timesConfig"></TinyLine>
    </AntDesign.Column>
    <AntDesign.Column TData="string">
        <RingProgress Data="@context.load" Config="loadConfig"></RingProgress>
    </AntDesign.Column>
</Table>

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <RingProgress @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }


    List<DataItem> datas = new List<DataItem>()
{
        new DataItem() { id= "local-001" },
        new DataItem() { id= "local-002" },
        new DataItem() { id= "local-003" },
        new DataItem() { id= "local-004" },
        new DataItem() { id= "local-005" },
    };

    protected override Task OnInitializedAsync()
    {
        Random r = new Random();
        datas.ForEach(x =>
        {
            for (int i = 0; i < 10; i++)
            {
                x.trend.Add(r.Next(10, 1000));
            }
            for (int i = 0; i < 20; i++)
            {
                x.times.Add(r.Next(200, 400));
            }
            x.load = r.NextDouble();
        });

        return base.OnInitializedAsync();
    }

    TinyColumnConfig trendConfig = new TinyColumnConfig()
    {
        Width = 200,
        Height = 60,
        AutoFit = false,
        Smooth = true,
        Annotation = new []
        {
            new LineAnnotation()
            {
                Type = Annotation.TypeLine,
                Start = new object[] { "min", "median" },
                End = new object[] { "max", "median" },
                Text = new AnnotationTextCfg
                {
                    Content = "中位数",
                    OffsetY = -2,
                    Style = new TextStyle()
                    {
                        TextAlign = TextStyle.TextAlignLeft,
                        FontSize = 10,
                        Fill = "rgba(44, 53, 66, 0.45)",
                        TextBaseline = TextStyle.TextBaselineBottom
                    }
                },
                Style = new GraphicStyle()
                {
                    Stroke = "rgba(0, 0, 0, 0.25)",
                    LineWidth = 2
                }
            },
        }
    };

    TinyLineConfig timesConfig = new TinyLineConfig()
    {
        Width = 200,
        Height = 60,
        AutoFit = false,
        Smooth = true,
        Annotation = new []
        {
            new LineAnnotation()
            {
                Type = Annotation.TypeLine,
                Start = new object[] { "min", "mean" },
                End = new object[] { "max", "mean" },
                Text = new AnnotationTextCfg()
                {
                    Content = "平均值",
                    OffsetY = -2,
                    Style = new TextStyle()
                    {
                        TextAlign = TextStyle.TextAlignLeft,
                        FontSize = 10,
                        Fill = "rgba(44, 53, 66, 0.45)",
                        TextBaseline = TextStyle.TextBaselineBottom
                    }
                },
                Style = new GraphicStyle()
                {
                    Stroke = "rgba(0, 0, 0, 0.25)",
                    LineWidth = 2
                }
            },
        }
    };

    RingProgressConfig loadConfig = new RingProgressConfig()
    {
        Width = 50,
        Height = 50,

        AutoFit = false,
        Percent = 0.7,
    };

    public class DataItem
    {
        public string id { get; set; }
        public List<int> times { get; set; } = new List<int>();
        public List<int> trend { get; set; } = new List<int>();
        public double load { get; set; }
    }

    public class DataValue
    {
        public string index { get; set; }
        public int value { get; set; }
    }

}

